<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>demo-1</title>
		<meta name="description" content="" />
		<meta name="author" content="可乐加糖" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<style type="text/css">
		.democontent{
			width:400px;
			height:300px;
			top:53px;
			left:10px;
			position: absolute;
			border:1px solid #ccc;
			background-color: rgb(235,235,185);
			-webkit-transition: top 1s ease-in-out;
  			-webkit-transition: left 1s ease-in-out;
  			
		}
		.my_CSS3_class {
			top:53px;
			left:400px;
			position: absolute;
  			-webkit-transition: top 1s ease-in-out;
  			-webkit-transition: left 1s ease-in-out;
		}
		</style>
	</head>
	<body>
		<button id="test">click me</button>
		<hr/>
		<div class="democontent">
			
		</div>
		<script type="text/javascript">
		$("#test").toggle(
				function(){
					$(".democontent").addClass("my_CSS3_class");
				},
				function(){
					$(".democontent").removeClass("my_CSS3_class");
				}
			);
		</script>
	</body>
</html>
